<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            left: 45%;
            top: 50px;
            position: relative;
            height: 200px;
            width: 300px;
            background: #cccccc;
            perspective: 400px;
        }
        .rect{
            position: absolute;
            width: 300px;
            height: 200px;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
            transform: rotateX(30deg) rotateY(30deg);
        }
        .face{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 50px;
            /*color: white;*/
            line-height: 100px;
            text-align: center;
            opacity: .5;
        }
        .zheng{
            /*正面*/
            transform: translateZ(50px);
            background: #0ea432;
        }
        .hou{
            /*后面*/
            transform: rotateY(180deg) translateZ(50px);
            background: #35b1ff;
        }
        .shang{
            /*右边*/
            transform: rotateY(90deg) translateZ(50px);
            background: #AF05AA;
        }
        .xia{
            /*左边*/
            transform: rotateY(-90deg) translateZ(50px);
            background: #ca141d;
        }
        .zou{
            /*上面*/
            transform:  rotateX(90deg) translateZ(50px);
            background: #986b0d;
        }
        .you{
            /*下面*/
            transform: rotateX(-90deg) translateZ(50px);
            background: #ff5000;
        }

        .liubian{
            position: relative;
            width: 200px;
            height: 200px;
            margin: 80px auto;
            transform-style: preserve-3d;
            transform-origin: 40% -40%;
            transform: rotateX(-10deg);
        }
        .liubian div{
            width: 100px;
            height: 100px;
            position: absolute;
            line-height: 100px;
            opacity: .5;
        }
        .liubian div:nth-of-type(1){
            /*正*/
            background: #986b0d;
        }
        .liubian div:nth-of-type(2){
            /*右上*/
            transform: translateX(76px) translateY(-10px) translateZ(-100px) rotateY(-60deg);
            background: #35b1ff;
        }
        .liubian div:nth-of-type(3){
            /*左上*/
            transform: translateX(-76px) translateY(-10px) translateZ(-100px) rotateY(60deg);
            background: #0ea432;
        }
        .liubian div:nth-of-type(4){
            /*左下*/
            background: #ff5000;
            transform: translateX(-76px) translateY(-27px) translateZ(100px) rotateY(-60deg);
        }
        .liubian div:nth-of-type(5){
            /*右下*/
            background: #ca141d;
            transform: translateX(76px) translateY(-27px) translateZ(100px) rotateY(60deg);
        }
        .liubian div:nth-of-type(6){
            /*后*/
            background: #AF05AA;
            transform: translateZ(-200px) ;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="rect">
        <div class="face zheng">1</div>
        <div class="face hou">2</div>
        <div class="face shang">3</div>
        <div class="face xia">4</div>
        <div class="face zou">5</div>
        <div class="face you">6</div>
    </div>
</div>
<div class="liubian">
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
    <div >6</div>
</div>
</body>
</html>